<template>
  <!--产品视图-->
  <div style="background-color: #E9EEF3;">
    <el-row>
      <el-col :span="18" :offset="3" style="color: #333333">
        <el-row style="background:#ffffff;padding:0 20px">
          <el-col :span="24">
            <div class="dialog__header">
              <span class="dialog__title">产品</span>
            </div>
          </el-col>
        </el-row>
        <el-row style="background:#ffffff;padding:0 20px">
          <el-form :model="product" ref="product" label-width="100px" :rules="rules">
              <el-divider><span class="font-14-bold">产品信息</span></el-divider>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="品名:"  prop="productName">
                    <el-input  v-model="product.productName" style="width: 79%"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="型号:" >
                    <el-input  v-model="product.productModel" style="width: 79%"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="编号/条码:"  >
                    <el-input  v-model="product.productCode" style="width: 79%"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="分类:" prop="productClassifyByProductClassifyId">
                    <el-select value-key="productClassifyId" v-model="product.productClassifyByProductClassifyId" placeholder="未选" style="width: 79%">
                      <el-option v-for="item in productClassifyList" :key="item.productClassifyId"
                                 :label="item.productClassifyName" :value="item">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="状态:">
                    <el-radio-group v-model="radio1">
                      <el-radio :label=0>上架</el-radio>
                      <el-radio :label=1>下架</el-radio>
                    </el-radio-group>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="库存:" >
                    <el-input  v-model="product.productStock" style="width: 79%"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item  label="库存上限:">
                    <el-input v-model="product.stockUpperLimit" style="width: 79%"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="价格:" >
                    <el-input  v-model="product.productPrice" style="width: 79%"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item  label="成本价格:" >
                    <el-input v-model="product.productCost" style="width: 79%"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12" :offset="7">
                  <el-form-item>
                    <el-button type="primary" @click="addProduct()">保存</el-button>
                    <el-button>取消</el-button>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script>export default {
  data () {
    return {
      radio1: '',
      product: {
        productId: 0,
        productCode: '',
        productState: '',
        productStock: '',
        productCost: '',
        stockUpperLimit: '',
        productModel: '',
        productName: '',
        productPrice: '',
        productClassifyByProductClassifyId: ''
      },
      productClassifyList: [],
      rules: {
        productName: [{
          required: true,
          message: '必须填',
          trigger: 'blur'
        }, {
          min: 2,
          max: 8,
          message: '长度在 2 到 8 个字符',
          trigger: 'blur'
        }],
        productClassifyByProductClassifyId: [{
          required: true,
          message: '必须选择',
          trigger: 'blur'
        }]
      },
      mulSelection: []
    }
  },
  methods: {
    // 查询机会
    initData () {
      let productId = this.$route.query.productId
      this.$axios.get('http://localhost:8088/product-selectOne', {
        params: {
          productId: productId
        }
      })
        .then(v => {
          this.product = v.data
          this.radio1 = this.product.productState
        })
        .catch(function (v) {
        })
    },
    classify () {
      this.$axios.get('http://localhost:8088/product-classify-list')
        .then(v => {
          this.productClassifyList = v.data
        })
        .catch(function (v) {
        })
    },
    addProduct () {
      this.product.productState = this.radio1
      this.$refs.product.validate((valid) => {
        if (valid) {
          this.$axios.post('http://localhost:8088/product-addProduct', this.product)
            .then(v => {
              // 1、刷新数据
              this.initData(this.currPage, this.pageSize)
              // 2、关闭弹框
              this.dialogFormVisible = false
              // 3、重新初始化表单数据模型
              this.product = {
                productId: 0,
                productCode: '',
                productState: '',
                productStock: '',
                productCost: '',
                stockUpperLimit: '',
                productModel: '',
                productName: '',
                productPrice: '',
                productClassifyByProductClassifyId: ''
              }
            })
            .catch(function (v) {
            })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
  },
  created: function () {
    this.initData()
    this.classify()
  }
}
</script>

<style>
  .dialog__title {
    line-height: 24px;
    font-size: 18px;
    color: #303133;

  }
  .dialog__header{
    padding: 20px 20px 40px;
  }
  .font-14-bold{
    color: #000000;
    font-weight: bold;
  }
  .cursor{
    cursor: pointer;
  }
</style>
